<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">

<%@ include file="_head.jsp"%>

<body data-type="widgets">
	<script src="<%=request.getContextPath()%>/static/admin/js/theme.js"></script>
	<script>
		var path ="<%=request.getContextPath()%>";

		function doSearch(pageNo) {
			document.searchForm.action = path + "/admin/articleList.do?page="
					+ pageNo;
			document.searchForm.submit();
		}

		function doEdit(id) {
			window.location.href = path + "/admin/articleAdd.do?id=" + id;
		}

		function doDel(id) {
			if (confirm("确认要删除当前文章？")) {
				window.location.href = path + "/admin/articleDel.do?id=" + id;
			}
		}
	</script>
	<div class="am-g tpl-g">
		<!-- 头部 -->
		<%@include file="_header.jsp"%>
		<!-- 风格切换 -->
		<%@include file="_skiner.jsp"%>
		<!-- 侧边导航栏 -->
		<%@include file="_sidebar.jsp"%>
		<!-- 内容区域 -->
		<div class="tpl-content-wrapper">
			<div class="row-content am-cf">
				<div class="row">
					<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
						<div class="widget am-cf">
							<div class="widget-head am-cf">
								<div class="widget-title  am-cf">文章列表</div>
							</div>
							<div class="widget-body  am-fr">

								<div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
									<div class="am-form-group">
										<div class="am-btn-toolbar">
											<div class="am-btn-group am-btn-group-xs">
												<a type="button" href="articleAdd.do"
													class="am-btn am-btn-default am-btn-success"> <span
													class="am-icon-plus"></span> 新增 </a>
												<!-- 
												<button type="button"
													class="am-btn am-btn-default am-btn-secondary">
													<span class="am-icon-save"></span> 保存
												</button>
												<button type="button"
													class="am-btn am-btn-default am-btn-warning">
													<span class="am-icon-archive"></span> 审核
												</button>
												<button type="button"
													class="am-btn am-btn-default am-btn-danger">
													<span class="am-icon-trash-o"></span> 删除
												</button>
												 -->
											</div>
										</div>
									</div>
								</div>
								<form name="searchForm" id="searchForm"
									action="<%=request.getContextPath() + "/admin/articleList.do"%>"
									method="post">
									<div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
										<div class="am-form-group tpl-table-list-select">
											<select data-am-selected="{btnSize: 'sm'}" name="categoryId">
												<c:if test="${categoryId==-1}">
													<option value="-1" selected="selected">所有类别</option>
												</c:if>
												<c:if test="${categoryId!=-1}">
													<option value="-1">所有类别</option>
												</c:if>
												<c:forEach items="${categoryList }" var="category">
													<c:if test="${category.id==categoryId}">
														<option value="${category.id}" selected="selected">${category.title}</option>
													</c:if>
													<c:if test="${category.id!=categoryId}">
														<option value="${category.id}">${category.title}</option>
													</c:if>
												</c:forEach>
											</select>
										</div>
									</div>
									<div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
										<div
											class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
											<input type="text" class="am-form-field " name="title"
												value="${title}"> <span class="am-input-group-btn">
												<button
													class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search"
													type="button" onclick="doSearch(1)"></button> </span>
										</div>
									</div>
								</form>
								<div class="am-u-sm-12">
									<table width="100%"
										class="am-table am-table-compact am-table-striped tpl-table-black ">
										<thead>
											<tr>
												<th>文章缩略图</th>
												<th>文章标题</th>
												<th>作者</th>
												<th>时间</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${articleList }" var="article">

												<tr class="gradeX">
													<td><img
														src="<%=request.getContextPath()%>/${article.coverImg }"
														class="tpl-table-line-img" alt=""></td>
													<td class="am-text-middle">${article.title }</td>
													<td class="am-text-middle">${article.author }</td>
													<td class="am-text-middle">${article.createTime }</td>
													<td class="am-text-middle">
														<div class="tpl-table-black-operation">
															<a href="javascript:doEdit(${article.id });"> <i
																class="am-icon-pencil"></i> 编辑 </a> <a
																href="javascript:doDel(${article.id });"
																class="tpl-table-black-operation-del"> <i
																class="am-icon-trash"></i> 删除 </a>
														</div>
													</td>
												</tr>
											</c:forEach>

										</tbody>
									</table>
								</div>
								<div class="am-u-lg-12 am-cf">
									<div class="am-fr">
										<ul class="am-pagination tpl-pagination">

											<%--如果是第一页,不允许点击--%>
											<c:choose>
												<c:when test="${curPageNo == 1}">
													<li class="disabled"><a href="#" aria-label="Previous">
															<span aria-hidden="true">«</span> </a>
													</li>
												</c:when>
												<c:otherwise>
													<%-- 点击到首页--%>
													<li><a href="javascript:doSearch(1);"
														aria-label="Previous"> <span aria-hidden="true">«</span>
													</a>
													</li>
												</c:otherwise>
											</c:choose>

											<%--中间页--%>
											<%--显示6页中间页[begin=起始页,end=最大页]--%>
											<%--总页数没有6页--%>
											<c:choose>
												<c:when test="${totalPageNo <= 6}">
													<c:set var="begin" value="1" />
													<c:set var="end" value="${totalPageNo}" />
												</c:when>
												<%--页数超过了6页--%>
												<c:otherwise>
													<c:set var="begin" value="${curPageNo- 1}" />
													<c:set var="end" value="${curPageNo + 3}" />
													<%--如果begin减1后为0,设置起始页为1,最大页为6--%>
													<c:if test="${begin -1 <= 0}">
														<c:set var="begin" value="1" />
														<c:set var="end" value="6" />
													</c:if>
													<%--如果end超过最大页,设置起始页=最大页-5--%>
													<c:if test="${end > totalPageNo}">
														<c:set var="begin" value="${totalPageNo - 5}" />
														<c:set var="end" value="${totalPageNo}" />
													</c:if>
												</c:otherwise>
											</c:choose>
											<%--遍历--%>
											<c:forEach var="i" begin="${begin}" end="${end}">
												<%--当前页,选中--%>
												<c:choose>
													<c:when test="${i == curPageNo}">
														<li class="am-active"><a href="#">${i}</a></li>
													</c:when>
													<%--不是当前页--%>
													<c:otherwise>
														<li><a href="javascript:doSearch(${i});">${i}</a>
														</li>
													</c:otherwise>
												</c:choose>
											</c:forEach>

											<%--如果是最后一页,不允许点击--%>
											<c:choose>
												<c:when test="${curPageNo== totalPageNo}">
													<li class="disabled"><a href="#" aria-label="Previous">
															<span aria-hidden="true">«</span> </a></li>
												</c:when>
												<c:otherwise>
													<%-- 点击到尾页--%>
													<li><a href="javascript:doSearch(${totalPageNo});"
														aria-label="Next"> <span aria-hidden="true">»</span> </a>
													</li>
												</c:otherwise>
											</c:choose>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<%@ include file="_footer.jsp"%>

</body>

</html>